import QtQuick 2.0

Item {
    id: root;

    ListModel {
        id: listModel;

        ListElement { name: "Mercury"; surfaceColor: "gray" }
        ListElement { name: "Venus"; surfaceColor: "yellow" }
        ListElement { name: "Earth"; surfaceColor: "blue" }
        ListElement { name: "Mars"; surfaceColor: "orange" }
        ListElement { name: "Jupiter"; surfaceColor: "orange" }
        ListElement { name: "Saturn"; surfaceColor: "yellow" }
        ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
        ListElement { name: "Neptune"; surfaceColor: "lightBlue" }
    }

    //列
    Column {
        id: column;
        width: 200;
        spacing: 2;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;

        Repeater {
            model: listModel;
            clip: true;

            Rectangle {
                width: column.width;
                height: 40;
                radius: 3;
                color: "blue";

                border.color: "lightBlue";

                Rectangle {
                    width: 28;
                    height: 28;
                    radius: 14;
                    color: surfaceColor;
                    border.color: "black";
                    border.width: 1;
                    anchors.left: parent.left;
                    anchors.leftMargin: 2;
                    anchors.verticalCenter: parent.verticalCenter;
                }

                Text {
                    text: name;
                    anchors.centerIn: parent;
                    font.pointSize: 20;
                }
            }
        }
    }

    //列表
    ListView {
        id: listView;
        width: 200;
        anchors.left: column.right;
        anchors.top: parent.top;
        anchors.leftMargin: 20;
        anchors.bottom: parent.bottom;
        clip: true;
        focus: true;
        spacing: 5;
        currentIndex: 0;
        //        snapMode: ListView.SnapOneItem;

        model: 100;

        delegate: numberComponent;

        highlight: highComponent;
        highlightFollowsCurrentItem: false;
    }

    //网格
    GridView {
        id: gridView;
        width: 400;
        anchors.left: listView.right;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;
        clip: true;
        cellWidth: 50;
        cellHeight: 50;
        model: 300;

        delegate: numberDelegate;
    }

    //代理组件
    Component {
        id: numberComponent;

        Item {
            width: ListView.view.width;
            height: 40;

            Text {
                anchors.centerIn: parent;
                text: index;
                font.pointSize: 10;
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    listView.currentIndex = index;
                }
            }
        }
    }

    Component {
        id: numberDelegate;

        Rectangle {
            width: 40;
            height: 40;
            color: "lightGreen";
            border.width: 2;
            border.color: "green";

            Text {
                anchors.centerIn: parent;
                text: index;
                font.pointSize: 10;
            }
        }
    }

    //高亮组件
    Component {
        id: highComponent;

        Item {
            width: ListView.view.width;
            height: ListView.view.currentItem.height;
            y: ListView.view.currentItem.y;

            Behavior on y {
                SequentialAnimation {
                    PropertyAnimation { target: rect; property: "opacity"; to: 0;
                        duration: 200;
                    }
                    NumberAnimation { duration: 1; }
                    PropertyAnimation { target: rect; property: "opacity"; to: 1;
                        duration: 200;
                    }
                }
            }

            Rectangle {
                id: rect;
                anchors.fill: parent;
                color: "#53d769";
            }
        }
    }

}
